<template>
    <el-container class="admin-container">
        <HeaderComponent />
        <el-container class="main-container">
            <el-aside class="menu-aside">
                <div class="collapse-button" @click="toggleCollapse">
                    <el-icon>
                        <Fold v-if="!isCollapse" />
                        <Expand v-else />
                    </el-icon>
                </div>
                <el-menu :default-active="currentActiveRoute" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
                    @close="handleClose" router>
                    <el-menu-item index="/admin/house" >
                        <el-icon>
                            <icon-menu />
                        </el-icon>
                        <template #title>房源管理</template>
                    </el-menu-item>
                    <el-menu-item index="/admin/manager">
                        <el-icon>
                            <document />
                        </el-icon>
                        <template #title>管理员</template>
                    </el-menu-item>
                    <el-menu-item index="/admin/monitor">
                        <el-icon>
                            <Histogram />
                        </el-icon>
                        <template #title>系统监控</template>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main :class="mainClass">
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import HeaderComponent from '@/components/HeaderComponent.vue';
import { ref, computed } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Setting,
    Fold,
    Expand,
    Histogram
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 菜单是否折叠
const isCollapse = ref(true)
// 当前激活的路由
const currentActiveRoute = ref(router.currentRoute.value.path)
// 监听路由变化，更新当前激活的路由
router.afterEach((to) => {
  currentActiveRoute.value = to.path
})
// 切换菜单折叠状态
const toggleCollapse = () => {
    isCollapse.value = !isCollapse.value
}

// 根据侧边栏是否折叠返回不同的class
const mainClass = computed(() => {
    return isCollapse.value ? 'main-collapsed' : 'main-expanded'
})

// 菜单点击事件
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

// 菜单关闭事件
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<style scoped>
.admin-container {
    display: flex;
    flex-direction: column;
}

.main-container {
    flex: 1;
    display: flex;
    width: auto;
}

.menu-aside {
    width: auto;
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
    transition: all 0.3s;
}

/* 折叠按钮 */
.collapse-button {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background-color: #409EFF;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    z-index: 101;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    margin-top: 10px;
}

.el-menu-vertical-demo {
    border-right: none;
    flex: 1;
}

.el-menu-vertical-demo .el-menu-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
}

.el-menu-vertical-demo .el-menu-item .el-icon {
    margin-right: 8px;
}

.el-main {
    padding: 20px;
    transition: all 0.3s;
}

.main-expanded {
    margin-left: 200px;
}

.main-collapsed {
    margin-left: 64px;
}

</style>